<!DOCTYPE html>
<html>

	<head>
		<meta charset="utf-8">
		<title>登录</title>
		<!-- <link rel="stylesheet" href="./css/login.css"> -->
		<style>
			* {
				margin: 0;
				padding: 0;
			}

			ul,
			ol,
			li {
				list-style: none;
			}

			a {
				text-decoration: none;
			}

			body {
				overflow: -Scroll;
				overflow-x: hidden
			}

			header {
				width: 980px;
				height: 90px;
				margin: 0 auto;
				display: flex;
				justify-content: space-between;
				align-items: center;
			}

			header>img {
				width: 204px;
				height: 36px;
			}

			header>.assit {
				font-size: 12px;
			}

			header>.assit>img {
				vertical-align: middle;
			}

			.line {
				width: 100%;
				height: 32px;
				background: #FFFCD8;
				position: relative;
			}

			.line>p {
				width: 860px;
				line-height: 32px;
				text-align: center;
				margin: 0 auto;
				font-size: 12px;
				position: relative;
			}

/* 			.line>p::before {
				position: absolute;
				width: 20px;
				height: 20px;
				left: -12px;
				top: 6px;
				content: '';
				background: url(./log-img/un_bg_pop.png) no-repeat 2px -188px;
			} */

			.line>form {
				width: 342px;
				height: 410px;
				background: #fff;
				position: absolute;
				right: 266px;
				top: 82px;
				z-index: 10;
				padding: 24px;
				box-sizing: border-box;
			}

			.line>form>p {
				width: 285px;
				height: 24px;
				display: flex;
				justify-content: space-between;
				align-items: center;
			}

			.line>form>p>span:nth-child(2) {
				font-size: 12px;
			}

			.line>form>input {
				width: 286px;
				height: 34px;
				border: 1px solid #ccc;
				outline: none;
				margin: 6px 0;
				padding: 0 8px;
				box-sizing: border-box;
			}

			.line>form>input:nth-child(3) {
				position: relative;
			}

			.line>form>.pass {
				width: 100px;
				position: absolute;
				top: 110px;
				right: -10px;
				font-size: 12px;
			}

			.line>form>.pass:hover {
				text-decoration: underline;
				cursor: pointer;
			}

			.line>form>.log {
				width: 286px;
				height: 24px;
				font-size: 12px;
				display: flex;
				justify-content: space-between;
				align-items: center;
			}

			.line>form>p:nth-of-type(2) {
				justify-content: flex-start;
				font-size: 12px;
				color: #aaa;
			}

			.line>form>p:nth-of-type(3) {
				font-size: 12px;
				margin-top: 36px;
				color: #888;
			}

			.line>form>p:nth-of-type(3)>span:last-child {
				color: #2577E3;
			}

			.line>form>p:nth-of-type(3)>span:last-child:hover {
				text-decoration: underline;
				cursor: pointer;
			}

			.line>form>p:nth-of-type(3)>span:nth-child(6) {
				width: 60px;
			}

			.line>form>p:nth-of-type(4) {
				justify-content: flex-start;
				margin: 23px 0;
			}

			.line>form>p:nth-of-type(4)>span {
				width: 30px;
				height: 30px;
				background: pink;
				margin-right: 14px;
			}

			.line>form>p:nth-of-type(4)>span:nth-child(1) {
				background: url(./log-img/un_login_third.png) no-repeat 0px 0px;
			}

			.line>form>p:nth-of-type(4)>span:nth-child(2) {
				background: url(./log-img/un_login_third.png) no-repeat -35px 0px;
			}

			.line>form>p:nth-of-type(4)>span:nth-child(3) {
				background: url(./log-img/un_login_third.png) no-repeat -70px 0px;
			}

			.line>form>p:nth-of-type(4)>span:nth-child(4) {
				background: url(./log-img/un_login_third.png) no-repeat -105px 0px;
			}

			.line>form>p:nth-of-type(4)>span:nth-child(5) {
				background: url(./log-img/un_login_third.png) no-repeat -140px 0px;
			}

			.line>form>input.btn {
				border: 0;
				background: orange;
				color: #fff;
				letter-spacing: 4px;
			}

			main {
				width: 1920px;
				height: 530px;
				left: -351px;
				top: 122px;
				position: absolute;
				background: url(./log-img/back.jpg) no-repeat;
			}

			footer {
				position: absolute;
				left: 50%;
				top: 632px;
				width: 980px;
				height: 90px;
				margin: 50px 0;
				transform: translateX(-50%);
				border-top: 1px dashed #2577E3;
			}

			footer>p {
				display: flex;
				justify-content: center;
				align-items: center;
				font-size: 12px;
				color: #666;
			}

			footer>p:nth-child(1) {
				margin-top: 22px;
			}

			footer>p>span {
				margin: 0 2px;
			}
		</style>
	</head>

	<body>
		<header>
			<a href="./index.html"><img src="./log-img/c_logo2020.png"></a>
			<div class="assit">
				<img src="./log-img/icon-assist.png">网站无障碍
			</div>
		</header>
		<div class="line">
			<p>依据《网络安全法》，为保障您相关功能的正常使用，账号需绑定手机，如您未绑定则登录后会引导您操作绑定。 新版《隐私政策》已上线，感谢您的支持。</p>
			<form>
				<p><span>携程账号登录</span><span>手机号查单></span></p>
				<input type="text" name="username" id="txt" placeholder="国内手机号/用户名/邮箱/卡号" />
				<input type="password" name="userpass" id="pass" placeholder="登录密码" />
				<div class="log">
					<p>
						<input type="checkbox" checked /><span>30天内自动登录</span>
					</p>
					<span>手机动态密码登录</span>
				</div>
				<input class="btn" type="button" name="" id="" value="登录" />
				<p><input type="checkbox" />阅读并同意携程的服务协议和个人信息保护政策</p>
				<p>
					<span>境外手机</span>
					<span>|</span>
					<span>公司客户</span>
					<span>|</span>
					<span>携程通</span>
					<span></span>
					<span><a id="reg" href="javascript:;">免费注册</a></span>
				</p>
				<p>
					<span></span>
					<span></span>
					<span></span>
					<span></span>
					<span></span>
				</p>
			</form>
		</div>
		<main></main>
		<footer>
			<p>
				<span>网站导航</span>
				<span>|</span>
				<span>宾馆索引</span>
				<span>|</span>
				<span>用户协议</span>
				<span>|</span>
				<span>关于携程</span>
				<span>|</span>
				<span>企业公民</span>
				<span>|</span>
				<span>诚聘英才</span>
				<span>|</span>
				<span>分销联盟</span>
				<span>|</span>
				<span>企业礼品卡采购</span>
				<span>|</span>
				<span>代理合作</span>
				<span>|</span>
				<span>广告业务</span>
				<span>|</span>
				<span>联系我们 </span>
				<span>|</span>
				<span>返回旧版</span>
			</p>
			<p>Copyright © 1999-2022, ctrip.com. All rights reserved.</p>
		</footer>
	</body>
</html>
<script src="./js/ajax.js"></script>
<script>
	function $(tag) {
		return document.querySelector(tag)
	}
    $('#reg').onclick = function() {
        location.href = 'regest.html';
    }
    $('input.btn').onclick = function () {
        $ajax({
            type:"POST",
            url:"./php/login.php",
            data:`username=${$('#txt').value}&userpass=${$('#pass').value}`,
            callback(msg) {
				console.log(msg);
                if(msg.trim() == "success") {
                    document.cookie = `username=${$('#txt').value}`,
					alert('登录成功！')
                    setTimeout(() => {
                        location.href = './index.html';
                    }, 100);
                } 
				if(msg.trim() == "fail") {
					alert('用户名不存在，请注册！')
                    setTimeout(() => {
                        location.href = 'regest.html';
                    }, 100);
                }
            }
        })
    }
</script>